<template>
  <div>
    <div class="search">
      <div @click="$router.back(-1)" class="goback">
        <van-icon name="arrow-left"/>
      </div>
      <div @click="$router.push('/search/search')" class="input">
        <van-icon name="search"/>
        搜索商品
      </div>
      <div @click="show = !show" class="more">
        <van-icon name="wap-nav"/>
        <transition name="van-fade">
          <div v-show="show" class="option">
            <div>综合排序</div>
            <div>价格由高到低</div>
            <div>价格由低到高</div>
          </div>
        </transition>
      </div>
    </div>

    <div ref="wrapper" class="goods">
      <div class="cont">
        <goods v-for='(item, index ) in goodsinfo' v-bind:goodsinfo="item" :key="index"></goods>
      </div>
    </div>

    <div class="cart">
      <div class="tips">2</div>
      <van-icon name="cart"/>
    </div>
  </div>
</template>

<script>
  import goods from './goods'
  import Bscroll from 'better-scroll'

  export default {
    components: {
      goods
    },
    name: "result",
    data: function () {
      return {
        show: false,
        goodsinfo: [
          {//商品信息
            id: "123",
            thumbnail: "https://www.baidu.com/img/baidu_jgylogo3.gif",
            img: ['https://www.baidu.com/img/baidu_jgylogo3.gif',
              'https://www.baidu.com/img/baidu_jgylogo3.gif',
              'https://www.baidu.com/img/baidu_jgylogo3.gif'],//幻灯图片
            title: "苹果XXXX",//名称,标题
            sub_title: "大苹果,好吃",//副标题
            info: "啊啊啊",
            tag_type: 1,//1直降,2,待补完...
            server: [1, 2],//1支持48小时理由退货,2冷冻运输
            product: "云南",//产地
            type: [
              {
                typeid: "123",//
                unit: "350g/份",//规格单位
                prize: 39.9,//真实价格
                cost_price: 79.9,//原价
                stock: 20,//库存
                info: "说明"//说明
              },
              {
                typeid: "456",//
                unit: "700g/份",//规格单位
                prize: 40.9,//真实价格
                cost_price: 80.9,//原价
                stock: 10,//库存
                info: "说明"//说明
              }
            ],//规格
            comment: {//评价
              tags: [//标签名
                {
                  name: "酸甜可口",//名称
                  num: 155,//数量
                },
                {
                  name: "好吃",//名称
                  num: 155
                }
              ],
              detail: [
                {
                  username: "甲",//用户名
                  time: "2018-08-07",//时间
                  score: 5,//评分
                  img: ['https://www.baidu.com/img/baidu_jgylogo3.gif', 'https://www.baidu.com/img/baidu_jgylogo3.gif',],//图
                  tag: ["好吃"],//所属标签
                  contact: "啊哈哈哈哈哈"
                },
                {
                  username: "乙",
                  time: "2018-08-07",
                  score: 3,
                  img: [],
                  tag: ["好吃"],
                  contact: "啊哈哈哈哈哈"
                }
              ]
            }
          },
          {//商品信息
            id: "123",
            thumbnail: "https://www.baidu.com/img/baidu_jgylogo3.gif",
            img: ['https://www.baidu.com/img/baidu_jgylogo3.gif',
              'https://www.baidu.com/img/baidu_jgylogo3.gif',
              'https://www.baidu.com/img/baidu_jgylogo3.gif'],//幻灯图片
            title: "苹果XXXX",//名称,标题
            sub_title: "大苹果,好吃",//副标题
            tag_type: 1,//1直降,2,待补完...
            server: [1, 2],//1支持48小时理由退货,2冷冻运输
            product: "云南",//产地
            type: [
              {
                typeid: "123",//
                unit: "350g/份",//规格单位
                prize: 39.9,//真实价格
                cost_price: 79.9,//原价
                stock: 20,//库存
                info: "说明"//说明
              }
            ],//规格
            comment: {//评价
              tags: [//标签名
                {
                  name: "酸甜可口",//名称
                  num: 155,//数量
                },
                {
                  name: "好吃",//名称
                  num: 155
                }
              ],
              detail: [
                {
                  username: "甲",//用户名
                  time: "2018-08-07",//时间
                  score: 5,//评分
                  img: ['https://www.baidu.com/img/baidu_jgylogo3.gif', 'https://www.baidu.com/img/baidu_jgylogo3.gif',],//图
                  tag: ["好吃"],//所属标签
                  contact: "啊哈哈哈哈哈"
                },
                {
                  username: "乙",
                  time: "2018-08-07",
                  score: 3,
                  img: [],
                  tag: ["好吃"],
                  contact: "啊哈哈哈哈哈"
                }
              ]
            }
          },
          {//商品信息
            id: "123",
            thumbnail: "https://www.baidu.com/img/baidu_jgylogo3.gif",
            img: ['https://www.baidu.com/img/baidu_jgylogo3.gif',
              'https://www.baidu.com/img/baidu_jgylogo3.gif',
              'https://www.baidu.com/img/baidu_jgylogo3.gif'],//幻灯图片
            title: "苹果XXXX",//名称,标题
            sub_title: "大苹果,好吃",//副标题
            tag_type: 1,//1直降,2,待补完...
            server: [1, 2],//1支持48小时理由退货,2冷冻运输
            product: "云南",//产地
            type: [
              {
                typeid: "123",//
                unit: "350g/份",//规格单位
                prize: 39.9,//真实价格
                cost_price: 79.9,//原价
                stock: 20,//库存
                info: "说明"//说明
              }
            ],//规格
            comment: {//评价
              tags: [//标签名
                {
                  name: "酸甜可口",//名称
                  num: 155,//数量
                },
                {
                  name: "好吃",//名称
                  num: 155
                }
              ],
              detail: [
                {
                  username: "甲",//用户名
                  time: "2018-08-07",//时间
                  score: 5,//评分
                  img: ['https://www.baidu.com/img/baidu_jgylogo3.gif', 'https://www.baidu.com/img/baidu_jgylogo3.gif',],//图
                  tag: ["好吃"],//所属标签
                  contact: "啊哈哈哈哈哈"
                },
                {
                  username: "乙",
                  time: "2018-08-07",
                  score: 3,
                  img: [],
                  tag: ["好吃"],
                  contact: "啊哈哈哈哈哈"
                }
              ]
            }
          },
          {//商品信息
            id: "123",
            thumbnail: "https://www.baidu.com/img/baidu_jgylogo3.gif",
            img: ['https://www.baidu.com/img/baidu_jgylogo3.gif',
              'https://www.baidu.com/img/baidu_jgylogo3.gif',
              'https://www.baidu.com/img/baidu_jgylogo3.gif'],//幻灯图片
            title: "苹果XXXX",//名称,标题
            sub_title: "大苹果,好吃",//副标题
            tag_type: 1,//1直降,2,待补完...
            server: [1, 2],//1支持48小时理由退货,2冷冻运输
            product: "云南",//产地
            type: [
              {
                typeid: "123",//
                unit: "350g/份",//规格单位
                prize: 39.9,//真实价格
                cost_price: 79.9,//原价
                stock: 20,//库存
                info: "说明"//说明
              },
              {
                typeid: "456",//
                unit: "700g/份",//规格单位
                prize: 40.9,//真实价格
                cost_price: 80.9,//原价
                stock: 10,//库存
                info: "说明"//说明
              }
            ],//规格
            comment: {//评价
              tags: [//标签名
                {
                  name: "酸甜可口",//名称
                  num: 155,//数量
                },
                {
                  name: "好吃",//名称
                  num: 155
                }
              ],
              detail: [
                {
                  username: "甲",//用户名
                  time: "2018-08-07",//时间
                  score: 5,//评分
                  img: ['https://www.baidu.com/img/baidu_jgylogo3.gif', 'https://www.baidu.com/img/baidu_jgylogo3.gif',],//图
                  tag: ["好吃"],//所属标签
                  contact: "啊哈哈哈哈哈"
                },
                {
                  username: "乙",
                  time: "2018-08-07",
                  score: 3,
                  img: [],
                  tag: ["好吃"],
                  contact: "啊哈哈哈哈哈"
                }
              ]
            }
          },
          {//商品信息
            id: "123",
            thumbnail: "https://www.baidu.com/img/baidu_jgylogo3.gif",
            img: ['https://www.baidu.com/img/baidu_jgylogo3.gif',
              'https://www.baidu.com/img/baidu_jgylogo3.gif',
              'https://www.baidu.com/img/baidu_jgylogo3.gif'],//幻灯图片
            title: "苹果XXXX",//名称,标题
            sub_title: "大苹果,好吃",//副标题
            tag_type: 1,//1直降,2,待补完...
            server: [1, 2],//1支持48小时理由退货,2冷冻运输
            product: "云南",//产地
            type: [
              {
                typeid: "123",//
                unit: "350g/份",//规格单位
                prize: 39.9,//真实价格
                cost_price: 79.9,//原价
                stock: 20,//库存
                info: "说明"//说明
              }
            ],//规格
            comment: {//评价
              tags: [//标签名
                {
                  name: "酸甜可口",//名称
                  num: 155,//数量
                },
                {
                  name: "好吃",//名称
                  num: 155
                }
              ],
              detail: [
                {
                  username: "甲",//用户名
                  time: "2018-08-07",//时间
                  score: 5,//评分
                  img: ['https://www.baidu.com/img/baidu_jgylogo3.gif', 'https://www.baidu.com/img/baidu_jgylogo3.gif',],//图
                  tag: ["好吃"],//所属标签
                  contact: "啊哈哈哈哈哈"
                },
                {
                  username: "乙",
                  time: "2018-08-07",
                  score: 3,
                  img: [],
                  tag: ["好吃"],
                  contact: "啊哈哈哈哈哈"
                }
              ]
            }
          },
          {//商品信息
            id: "123",
            thumbnail: "https://www.baidu.com/img/baidu_jgylogo3.gif",
            img: ['https://www.baidu.com/img/baidu_jgylogo3.gif',
              'https://www.baidu.com/img/baidu_jgylogo3.gif',
              'https://www.baidu.com/img/baidu_jgylogo3.gif'],//幻灯图片
            title: "苹果XXXX",//名称,标题
            sub_title: "大苹果,好吃",//副标题
            tag_type: 1,//1直降,2,待补完...
            server: [1, 2],//1支持48小时理由退货,2冷冻运输
            product: "云南",//产地
            type: [
              {
                typeid: "123",//
                unit: "350g/份",//规格单位
                prize: 39.9,//真实价格
                cost_price: 79.9,//原价
                stock: 20,//库存
                info: "说明"//说明
              }
            ],//规格
            comment: {//评价
              tags: [//标签名
                {
                  name: "酸甜可口",//名称
                  num: 155,//数量
                },
                {
                  name: "好吃",//名称
                  num: 155
                }
              ],
              detail: [
                {
                  username: "甲",//用户名
                  time: "2018-08-07",//时间
                  score: 5,//评分
                  img: ['https://www.baidu.com/img/baidu_jgylogo3.gif', 'https://www.baidu.com/img/baidu_jgylogo3.gif',],//图
                  tag: ["好吃"],//所属标签
                  contact: "啊哈哈哈哈哈"
                },
                {
                  username: "乙",
                  time: "2018-08-07",
                  score: 3,
                  img: [],
                  tag: ["好吃"],
                  contact: "啊哈哈哈哈哈"
                }
              ]
            }
          },
          {//商品信息
            id: "123",
            thumbnail: "https://www.baidu.com/img/baidu_jgylogo3.gif",
            img: ['https://www.baidu.com/img/baidu_jgylogo3.gif',
              'https://www.baidu.com/img/baidu_jgylogo3.gif',
              'https://www.baidu.com/img/baidu_jgylogo3.gif'],//幻灯图片
            title: "苹果XXXX",//名称,标题
            sub_title: "大苹果,好吃",//副标题
            tag_type: 1,//1直降,2,待补完...
            server: [1, 2],//1支持48小时理由退货,2冷冻运输
            product: "云南",//产地
            type: [
              {
                typeid: "123",//
                unit: "350g/份",//规格单位
                prize: 39.9,//真实价格
                cost_price: 79.9,//原价
                stock: 20,//库存
                info: "说明"//说明
              },
              {
                typeid: "456",//
                unit: "700g/份",//规格单位
                prize: 40.9,//真实价格
                cost_price: 80.9,//原价
                stock: 10,//库存
                info: "说明"//说明
              }
            ],//规格
            comment: {//评价
              tags: [//标签名
                {
                  name: "酸甜可口",//名称
                  num: 155,//数量
                },
                {
                  name: "好吃",//名称
                  num: 155
                }
              ],
              detail: [
                {
                  username: "甲",//用户名
                  time: "2018-08-07",//时间
                  score: 5,//评分
                  img: ['https://www.baidu.com/img/baidu_jgylogo3.gif', 'https://www.baidu.com/img/baidu_jgylogo3.gif',],//图
                  tag: ["好吃"],//所属标签
                  contact: "啊哈哈哈哈哈"
                },
                {
                  username: "乙",
                  time: "2018-08-07",
                  score: 3,
                  img: [],
                  tag: ["好吃"],
                  contact: "啊哈哈哈哈哈"
                }
              ]
            }
          },
          {//商品信息
            id: "123",
            thumbnail: "https://www.baidu.com/img/baidu_jgylogo3.gif",
            img: ['https://www.baidu.com/img/baidu_jgylogo3.gif',
              'https://www.baidu.com/img/baidu_jgylogo3.gif',
              'https://www.baidu.com/img/baidu_jgylogo3.gif'],//幻灯图片
            title: "苹果XXXX",//名称,标题
            sub_title: "大苹果,好吃",//副标题
            tag_type: 1,//1直降,2,待补完...
            server: [1, 2],//1支持48小时理由退货,2冷冻运输
            product: "云南",//产地
            type: [
              {
                typeid: "123",//
                unit: "350g/份",//规格单位
                prize: 39.9,//真实价格
                cost_price: 79.9,//原价
                stock: 20,//库存
                info: "说明"//说明
              }
            ],//规格
            comment: {//评价
              tags: [//标签名
                {
                  name: "酸甜可口",//名称
                  num: 155,//数量
                },
                {
                  name: "好吃",//名称
                  num: 155
                }
              ],
              detail: [
                {
                  username: "甲",//用户名
                  time: "2018-08-07",//时间
                  score: 5,//评分
                  img: ['https://www.baidu.com/img/baidu_jgylogo3.gif', 'https://www.baidu.com/img/baidu_jgylogo3.gif',],//图
                  tag: ["好吃"],//所属标签
                  contact: "啊哈哈哈哈哈"
                },
                {
                  username: "乙",
                  time: "2018-08-07",
                  score: 3,
                  img: [],
                  tag: ["好吃"],
                  contact: "啊哈哈哈哈哈"
                }
              ]
            }
          },
          {//商品信息
            id: "123",
            thumbnail: "https://www.baidu.com/img/baidu_jgylogo3.gif",
            img: ['https://www.baidu.com/img/baidu_jgylogo3.gif',
              'https://www.baidu.com/img/baidu_jgylogo3.gif',
              'https://www.baidu.com/img/baidu_jgylogo3.gif'],//幻灯图片
            title: "苹果XXXX",//名称,标题
            sub_title: "大苹果,好吃",//副标题
            tag_type: 1,//1直降,2,待补完...
            server: [1, 2],//1支持48小时理由退货,2冷冻运输
            product: "云南",//产地
            type: [
              {
                typeid: "123",//
                unit: "350g/份",//规格单位
                prize: 39.9,//真实价格
                cost_price: 79.9,//原价
                stock: 20,//库存
                info: "说明"//说明
              }
            ],//规格
            comment: {//评价
              tags: [//标签名
                {
                  name: "酸甜可口",//名称
                  num: 155,//数量
                },
                {
                  name: "好吃",//名称
                  num: 155
                }
              ],
              detail: [
                {
                  username: "甲",//用户名
                  time: "2018-08-07",//时间
                  score: 5,//评分
                  img: ['https://www.baidu.com/img/baidu_jgylogo3.gif', 'https://www.baidu.com/img/baidu_jgylogo3.gif',],//图
                  tag: ["好吃"],//所属标签
                  contact: "啊哈哈哈哈哈"
                },
                {
                  username: "乙",
                  time: "2018-08-07",
                  score: 3,
                  img: [],
                  tag: ["好吃"],
                  contact: "啊哈哈哈哈哈"
                }
              ]
            }
          },
          {//商品信息
            id: "123",
            thumbnail: "https://www.baidu.com/img/baidu_jgylogo3.gif",
            img: ['https://www.baidu.com/img/baidu_jgylogo3.gif',
              'https://www.baidu.com/img/baidu_jgylogo3.gif',
              'https://www.baidu.com/img/baidu_jgylogo3.gif'],//幻灯图片
            title: "苹果XXXX",//名称,标题
            sub_title: "大苹果,好吃",//副标题
            tag_type: 1,//1直降,2,待补完...
            server: [1, 2],//1支持48小时理由退货,2冷冻运输
            product: "云南",//产地
            type: [
              {
                typeid: "123",//
                unit: "350g/份",//规格单位
                prize: 39.9,//真实价格
                cost_price: 79.9,//原价
                stock: 20,//库存
                info: "说明"//说明
              }
            ],//规格
            comment: {//评价
              tags: [//标签名
                {
                  name: "酸甜可口",//名称
                  num: 155,//数量
                },
                {
                  name: "好吃",//名称
                  num: 155
                }
              ],
              detail: [
                {
                  username: "甲",//用户名
                  time: "2018-08-07",//时间
                  score: 5,//评分
                  img: ['https://www.baidu.com/img/baidu_jgylogo3.gif', 'https://www.baidu.com/img/baidu_jgylogo3.gif',],//图
                  tag: ["好吃"],//所属标签
                  contact: "啊哈哈哈哈哈"
                },
                {
                  username: "乙",
                  time: "2018-08-07",
                  score: 3,
                  img: [],
                  tag: ["好吃"],
                  contact: "啊哈哈哈哈哈"
                }
              ]
            }
          },
          {//商品信息
            id: "123",
            thumbnail: "https://www.baidu.com/img/baidu_jgylogo3.gif",
            img: ['https://www.baidu.com/img/baidu_jgylogo3.gif',
              'https://www.baidu.com/img/baidu_jgylogo3.gif',
              'https://www.baidu.com/img/baidu_jgylogo3.gif'],//幻灯图片
            title: "苹果XXXX",//名称,标题
            sub_title: "大苹果,好吃",//副标题
            tag_type: 1,//1直降,2,待补完...
            server: [1, 2],//1支持48小时理由退货,2冷冻运输
            product: "云南",//产地
            type: [
              {
                typeid: "123",//
                unit: "350g/份",//规格单位
                prize: 39.9,//真实价格
                cost_price: 79.9,//原价
                stock: 20,//库存
                info: "说明"//说明
              },
              {
                typeid: "456",//
                unit: "700g/份",//规格单位
                prize: 40.9,//真实价格
                cost_price: 80.9,//原价
                stock: 10,//库存
                info: "说明"//说明
              }
            ],//规格
            comment: {//评价
              tags: [//标签名
                {
                  name: "酸甜可口",//名称
                  num: 155,//数量
                },
                {
                  name: "好吃",//名称
                  num: 155
                }
              ],
              detail: [
                {
                  username: "甲",//用户名
                  time: "2018-08-07",//时间
                  score: 5,//评分
                  img: ['https://www.baidu.com/img/baidu_jgylogo3.gif', 'https://www.baidu.com/img/baidu_jgylogo3.gif',],//图
                  tag: ["好吃"],//所属标签
                  contact: "啊哈哈哈哈哈"
                },
                {
                  username: "乙",
                  time: "2018-08-07",
                  score: 3,
                  img: [],
                  tag: ["好吃"],
                  contact: "啊哈哈哈哈哈"
                }
              ]
            }
          },
          {//商品信息
            id: "123",
            thumbnail: "https://www.baidu.com/img/baidu_jgylogo3.gif",
            img: ['https://www.baidu.com/img/baidu_jgylogo3.gif',
              'https://www.baidu.com/img/baidu_jgylogo3.gif',
              'https://www.baidu.com/img/baidu_jgylogo3.gif'],//幻灯图片
            title: "苹果XXXX",//名称,标题
            sub_title: "大苹果,好吃",//副标题
            tag_type: 1,//1直降,2,待补完...
            server: [1, 2],//1支持48小时理由退货,2冷冻运输
            product: "云南",//产地
            type: [
              {
                typeid: "123",//
                unit: "350g/份",//规格单位
                prize: 39.9,//真实价格
                cost_price: 79.9,//原价
                stock: 20,//库存
                info: "说明"//说明
              }
            ],//规格
            comment: {//评价
              tags: [//标签名
                {
                  name: "酸甜可口",//名称
                  num: 155,//数量
                },
                {
                  name: "好吃",//名称
                  num: 155
                }
              ],
              detail: [
                {
                  username: "甲",//用户名
                  time: "2018-08-07",//时间
                  score: 5,//评分
                  img: ['https://www.baidu.com/img/baidu_jgylogo3.gif', 'https://www.baidu.com/img/baidu_jgylogo3.gif',],//图
                  tag: ["好吃"],//所属标签
                  contact: "啊哈哈哈哈哈"
                },
                {
                  username: "乙",
                  time: "2018-08-07",
                  score: 3,
                  img: [],
                  tag: ["好吃"],
                  contact: "啊哈哈哈哈哈"
                }
              ]
            }
          },
          {//商品信息
            id: "123",
            thumbnail: "https://www.baidu.com/img/baidu_jgylogo3.gif",
            img: ['https://www.baidu.com/img/baidu_jgylogo3.gif',
              'https://www.baidu.com/img/baidu_jgylogo3.gif',
              'https://www.baidu.com/img/baidu_jgylogo3.gif'],//幻灯图片
            title: "苹果XXXX",//名称,标题
            sub_title: "大苹果,好吃",//副标题
            tag_type: 1,//1直降,2,待补完...
            server: [1, 2],//1支持48小时理由退货,2冷冻运输
            product: "云南",//产地
            type: [
              {
                typeid: "123",//
                unit: "350g/份",//规格单位
                prize: 39.9,//真实价格
                cost_price: 79.9,//原价
                stock: 20,//库存
                info: "说明"//说明
              }
            ],//规格
            comment: {//评价
              tags: [//标签名
                {
                  name: "酸甜可口",//名称
                  num: 155,//数量
                },
                {
                  name: "好吃",//名称
                  num: 155
                }
              ],
              detail: [
                {
                  username: "甲",//用户名
                  time: "2018-08-07",//时间
                  score: 5,//评分
                  img: ['https://www.baidu.com/img/baidu_jgylogo3.gif', 'https://www.baidu.com/img/baidu_jgylogo3.gif',],//图
                  tag: ["好吃"],//所属标签
                  contact: "啊哈哈哈哈哈"
                },
                {
                  username: "乙",
                  time: "2018-08-07",
                  score: 3,
                  img: [],
                  tag: ["好吃"],
                  contact: "啊哈哈哈哈哈"
                }
              ]
            }
          },

        ]
      }
    },
    mounted() {
      this.$nextTick(() => {
        for (var i = 0; i < this.goodsinfo.length; i++) {
          for (var j = 0; j < this.goodsinfo[i].type.length; j++) {
            // console.log(this.goodsinfo)
            this.$set(this.goodsinfo[i].type[j], "count", 0)
          }
        }
        console.log(this.goodsinfo)
        this.scroll = new Bscroll(this.$refs.wrapper, {
          click: true,
          // scrollX:true,
          scrollY: true,
          // eventPassthrough:'verti'
        })
      })
    }
  }
</script>

<style lang="less" scoped>
  .cart {
    width: 50px;
    height: 50px;
    background: @_green;
    border-radius: 50%;
    position: fixed;
    bottom: 5%;
    color: #fff;
    font-size: 25px;
    text-align: center;
    line-height: 60px;
    left: 2%;
  }

  .more {
    position: relative;
  }

  .option {
    width: 150px;
    height: 150px;
    background: #ffffff;
    position: absolute;
    top: 30px;
    font-size: 14px;
    color: @_blk;
    right: 0px;
    line-height: 50px;
    border: 1px solid @_lgrey;
  }

  .goods {
    height: calc(100vh - 45px);
    background-color: #fff;
  }

  .search {
    border-bottom: 1px solid @_lgrey;
    position: relative;
    z-index: 2;
    height: 45px;
    background: #ffffff;
  }

  .goback {
    float: left;
    width: 10%;
    text-align: center;
    font-size: 20px;
    vertical-align: middle;
    line-height: 45px;
  }

  .more {
    float: right;
    width: 10%;
    text-align: center;
    font-size: 20px;
    vertical-align: middle;
    line-height: 45px;
  }

  .input {
    width: 75%;
    float: left;
    background-color: #f5f5f5;
    margin-left: 2.5%;
    line-height: 35px;
    margin-top: 5px;
    border-radius: 8px;
    text-align: center;
  }

  .tips {
    background: @_red;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    font-size: 12px;
    line-height: 17px;
    position: absolute;
    top: -8px;
    right: 2px;
  }
</style>
